<template>
  <div id="Info" v-loading="loading" element-loading-background="#000b1c" element-loading-text="加载中">
    <div class="left">
      <div class="back">
        <div class="backIco" @click="back">
          <el-icon><Back /></el-icon>
        </div>
        <div>
          <div class="deviceId">
            <div class="id">{{ infoData?.deviceId }}</div>
            <div>
              <el-tag
                :style="{
                  color:
                    infoData?.level == 10
                      ? '#2B8EF3'
                      : infoData?.level == 11 || infoData?.warnLevel == 10 || infoData?.warnLevel == 11
                      ? '#e05861'
                      : infoData?.level == 6 || infoData?.warnLevel == 6
                      ? '#fed36a'
                      : infoData?.level == 9 || infoData?.status == 0
                      ? '#d1eaff'
                      : '#6fe3ba',
                  borderColor: 'transparent',
                }"
                :color="
                  infoData?.level == 10
                    ? 'rgba(43, 142, 243,0.3)'
                    : infoData?.level == 11 || infoData?.warnLevel == 10 || infoData?.warnLevel == 11
                    ? 'rgba(245, 108, 108,0.3)'
                    : infoData?.level == 6 || infoData?.warnLevel == 6
                    ? 'rgba(254, 211, 106, 0.26)'
                    : infoData?.level == 9 || infoData?.status == 0
                    ? 'rgba(255, 255, 255, 0.26)'
                    : 'rgba(111, 227, 186, 0.26)'
                "
              >
                {{
                  infoData?.level == 10
                    ? '高报'
                    : infoData?.level == 11
                    ? '低报'
                    : infoData?.warnLevel == 10 || infoData?.warnLevel == 11
                    ? '报警'
                    : infoData?.level == 6 || infoData?.warnLevel == 6
                    ? '故障'
                    : infoData?.level == 9 || infoData?.status == 0
                    ? '离线'
                    : '正常'
                }}
              </el-tag>
            </div>
          </div>
          <div class="name">{{ infoData?.device_name || infoData?.name }}</div>
        </div>
      </div>
      <div class="imgs">
        <img src="../assets/image/klt.png" alt="" />
      </div>
      <div class="Info">
        <div class="warnInfo">
          <el-descriptions v-if="type == 'warn'" direction="vertical" :column="2" :colon="false">
            <el-descriptions-item label="报警类型"
              >{{
                infoData?.level == 10
                  ? '高报'
                  : infoData?.level == 11
                  ? '低报'
                  : infoData?.level == 6
                  ? '故障'
                  : infoData?.level == 9
                  ? '离线'
                  : ''
              }}
            </el-descriptions-item>
            <el-descriptions-item label="报警浓度">{{ infoData?.warnData || 0 }}</el-descriptions-item>
            <el-descriptions-item label="气体类型">{{
              infoData?.type == 'oxygen' ? '氧气' : '可燃气 '
            }}</el-descriptions-item>
            <el-descriptions-item label="当前浓度值">
              {{ infoData?.concentration || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="报警时间" :span="2">
              {{ infoData?.createdDate || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item label="恢复时间" :span="2">
              {{ infoData?.restoreDate || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item label="响应时间" :span="2">
              {{ infoData?.responseDate || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item label="响应人" :span="2">
              {{ infoData?.responder || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属企业" :span="2">
              {{ infoData?.projectName || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item class="bbb" label="地址" :span="2">{{
              infoData?.location || '- -'
            }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions v-if="type == 'device'" direction="vertical" :column="2" :colon="false">
            <el-descriptions-item label="气体类型">{{
              infoData?.type == 'oxygen' ? '氧气' : '可燃气 '
            }}</el-descriptions-item>
            <el-descriptions-item label="浓度值">
              {{ infoData?.concentration || 0 }}
            </el-descriptions-item>

            <el-descriptions-item label="最近连接时间" :span="2">
              {{ infoData?.latestDate || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" :span="2">
              {{ infoData?.createdDate || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item label="所属企业" :span="2">
              {{ infoData?.projectName || '- -' }}
            </el-descriptions-item>
            <el-descriptions-item class="bbb" label="地址" :span="2">{{
              infoData?.location || '- -'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div class="right">
      <!-- <el-button @click="Intercept">截取</el-button>
      <el-button @click="reduction">还原</el-button> -->
      <div class="operate">
        <div class="type">
          <el-button style="color: #94ceff">{{ infoData?.type == 'oxygen' ? '氧气' : '可燃气 ' }}</el-button>
        </div>
        <div class="op-right">
          <div class="switch">
            <span>实时刷新</span>
            <el-switch v-model="switchVal" active-color="#008efa" inactive-color="#010119" @change="switchChg">
            </el-switch>
          </div>
          <div>
            <el-date-picker
              size="large"
              class="time"
              v-model="time"
              type="datetimerange"
              :shortcuts="shortcuts"
              align="right"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :disabled="timeDis"
              @change="pickerChe"
              :disabledDate="disabledDate"
              @focus="focusChange"
              @blur="blurChange"
            ></el-date-picker>
          </div>
        </div>
      </div>
      <div class="Echart">
        <InfoEchart id="deEchart" ref="deEchart" :options="optionsEchars" :setData="SeriessetData"></InfoEchart>
      </div>
    </div>
  </div>
</template>
<script setup>
import InfoEchart from '../components/echart/InfoEchart.vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { reactive, ref, onMounted, onBeforeUnmount, nextTick, watch, defineExpose } from 'vue'
import { inject } from 'vue'
import { Back } from '@element-plus/icons'
const router = useRouter()
// 父组件传的参数
const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  infoData: {
    type: Object,
    default: () => ({}),
  },
  Seriesset: {
    type: Array,
    default: () => [],
  },
})

const optionsEchars = ref({})
const SeriessetData = ref([])
const timeDis = ref(false)
const switchVal = ref(false)
watch(
  () => props.Seriesset,
  e => {
    if (e) {
      SeriessetData.value = e
      // setOptionsEchars()
      console.log(SeriessetData.value, '传过来的图表数据')
    }
  },
  {
    immediate: true,
    deep: true, // 深度监听的参数
  },
)
// 定义 emit 用于父子组件双向

let times = null
const loading = false

onMounted(() => {
  refresh()
})
const getInfoList = inject('getInfoList')

function refresh() {
  times = setInterval(() => {
    // 报警详情
    getInfoList(false)
  }, 3000)
}
function back() {
  router.go(-1)
}
const time = ref(null)
const currentTime = ref(null)
const prevTime = ref(null)
const nextTime = ref(null)
const start = ref(null)
const end = ref(null)
const defaultTimes = ref(['00:00:00', '23:59:59'])

const shortcuts = [
  {
    text: '最近1分钟',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 60 * 1000)
      return [start, end]
    },
  },
  {
    text: '最近3分钟',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 180 * 1000)
      return [start, end]
    },
  },
  {
    text: '最近5分钟',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 300 * 1000)
      return [start, end]
    },
  },
  {
    text: '最近10分钟',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 600 * 1000)
      return [start, end]
    },
  },
  {
    text: '最近15分钟',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 900 * 1000)
      return [start, end]
    },
  },
  {
    text: '最近1小时',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000)
      return [start, end]
    },
  },
  {
    text: '今天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(new Date(start.toLocaleDateString()).getTime())
      return [start, end]
    },
  },
]
function focusChange() {
  console.log('打开了')
  clearInterval(times)
  times = null
}
function blurChange() {
  console.log('关闭')
  refresh()
}
function disabledDate(time) {
  let current_time = dayjs(new Date()).format('YYYY-MM-DD') + ' 23:59:59'
  let t = new Date(current_time.replace(/-/g, '/')).getTime() //此处转换-为/是为了兼容ie,ie在转换时间戳时不支持2022-01-07格式
  return time.getTime() > t
  // return time.getTime() > new Date().getTime() //禁止选择今天以后的时间
}
function getCurrentTime(e) {
  if (e) {
    currentTime.value = e // 获取当前时间
    // 预警时间取前后五分钟
    if (props.type == 'warn') {
      prevTime.value = dayjs(currentTime.value).subtract(5, 'minutes').format('YYYY-MM-DD HH:mm:ss') // 获取前5分钟时间

      nextTime.value = dayjs(currentTime.value).add(5, 'minutes').format('YYYY-MM-DD HH:mm:ss') // 获取后5分钟时间
      time.value = [prevTime.value, nextTime.value]
    }
  } else {
    if (props.type == 'device') {
      // 设备时间取5分钟
      prevTime.value = dayjs(new Date()).subtract(5, 'minutes').format('YYYY-MM-DD HH:mm:ss') // 获取前5分钟时间
      nextTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 获取后5分钟时间
      time.value = [prevTime.value, nextTime.value]
    }
  }
  return time.value
}
// 开关
function switchChg(e) {
  emit('switchChg', e)
}
const getDetailList = inject('getDetailList')
// 选择时间
function pickerChe(e) {
  if (e) {
    ;[start.value, end.value] = e
    start.value = dayjs(start.value).format('YYYY-MM-DD HH:mm:ss')
    end.value = dayjs(end.value).format('YYYY-MM-DD HH:mm:ss')
    console.log(start.value, end.value)
    refresh()
    getDetailList(1, new Date(start.value).getTime(), new Date(end.value).getTime())
  } else {
    start.value = ''
    end.value = ''
  }
}

const InterceptStr = ref(false)
// 截取
function Intercept() {
  InterceptStr.value = !InterceptStr.value
  deEchart.value.openIntercept(InterceptStr.value)
}
function reduction() {
  deEchart.value.reduction()
}
function setOptionsEchars(data) {
  console.log(data, '调用啦setOptionsEchars')
  // 为null时最大值自适应
  optionsEchars.value = {
    color: ['#00FFC4', '#9E87FFb3'],
    grid: {
      top: '10%',
      left: '13%',
      right: '13%',
      bottom: '15%',
    },

    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#fff',
        fontSize: 16,
        align: 'left',
      },
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      formatter: function (params) {
        const item = params[0]
        if (item) {
          let htmlText = `
          <div class="EchartBg">
            <div class="circleBox">
              <sapn class="circle"></sapn>
              <span >${item.seriesName}</span>
            </div>
            <div><span>${item.value[1]}${data?.value[0].unit}</span></div>
          </div>`
          return htmlText
        }
      },
    },

    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100,
      },
      {
        start: 0,
        end: 100,
      },
    ],
    // toolbox: {
    //   feature: {
    //     // 自定义缩放工具的名称
    //     dataZoom: {
    //       title: {
    //         zoom: '数据截取',
    //         back: '截取撤销',
    //       },
    //       yAxisIndex: 'none',
    //     },
    //   },
    // },
    xAxis: {
      data: data?.value[0].data.map(e => {
        return e.name
      }),
      // type: "time",
      axisPointer: {
        show: true,
        type: 'line',
        lineStyle: {
          color: '#94CEFF',
        },
      },
      axisLabel: {
        color: '#94CEFF',
        fontSize: 16,
      },
    },
    yAxis: {
      type: 'value',
      scale: true, //自适应
      position: 'right',
      // axisLine: {
      //   show: true,
      //   lineStyle: {
      //     color: "#90979c",
      //   },
      // },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#213a5d',
        },
      },
      // axisTick: {
      //   show: false,
      // },
      // splitArea: {
      //   show: false,
      // },
      axisLabel: {
        color: '#94CEFF',
        fontSize: 16,
      },
    },
    series: data?.value,
  }
  // console.log(optionsEchars.value, 'optionsEchars')
}
const emit = defineEmits(['switchChg'])
const deEchart = ref()
// 子类暴露属性，方便父类调用
defineExpose({
  loading,
  timeDis,
  deEchart,
  getCurrentTime,
  setOptionsEchars,
})
onBeforeUnmount(() => {
  clearInterval(times)
  times = null
})
</script>
<style scoped lang="scss">
#Info {
  width: 100%;
  height: calc(100vh - 80px);
  text-align: left;
  padding: 30px;
  display: flex;
  box-sizing: border-box;

  .left {
    width: 320px;
    .back {
      display: flex;
      .backIco {
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background: #041a3b;
        margin-right: 20px;
        cursor: pointer;
        color: rgba(148, 206, 255, 1);
        border-radius: 12px;
      }
      .deviceId {
        display: flex;
        align-items: baseline;
        .id {
          font-size: 18px;
          height: 30px;
          font-weight: 700;
          letter-spacing: 0.45px;
          text-align: left;
          margin-right: 15px;
          background: linear-gradient(180deg, rgba(51, 248, 242, 1) 0%, rgba(5, 156, 255, 1) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .name {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 21px;
        color: rgba(148, 206, 255, 1);
        text-align: left;
        vertical-align: top;
      }
    }
    .imgs {
      width: 100%;
      padding-left: 50px;
      box-sizing: border-box;
      margin-top: 15px;
      img {
        width: 80%;
        height: 217px;
      }
    }
    .Info {
      flex: 1;
      width: 100%;
      background: url('@/assets/image/infoBg.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
      padding: 15px 30px;
      box-sizing: border-box;
      :deep(.warnInfo) {
        // box-shadow: none;
        .el-descriptions__body {
          background: transparent;
          .el-descriptions__table {
            tr {
              th {
                color: #94ceff;
              }
            }
            td {
              color: #fff;
            }
            .el-descriptions__cell {
              padding-bottom: 5px;
            }
            // .el-descriptions-item__cell {
            //   padding-bottom: 0;
            //   font-size: 12px;
            // }
            // .el-descriptions-item__content {
            //   padding-bottom: 0;
            //   font-size: 16px;
            // }
            // tbody {
            //   &:nth-child(8) {
            //     .el-descriptions-item__content {
            //       padding-bottom: 0;
            //     }
            //   }
            // }
          }
        }
      }
    }
  }
  :deep(.right) {
    margin-left: 60px;
    flex: 1;
    color: #94ceff;
    font-size: 16px;
    display: flex;
    flex-direction: column;

    .operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .type {
        .el-button {
          color: #94ceff;
          font-weight: 700;
          border-radius: 12px;
          background: rgba(4, 26, 59, 1);
          border-color: transparent;
          &:hover {
            background: #041a3b !important;
          }
        }
      }
      .op-right {
        display: flex;
        align-items: center;
        .switch {
          span {
            font-size: 16px;
          }
        }
        .el-switch__core {
          border-color: #94ceff !important;
          &:after {
            background: #94ceff;
          }
          margin: 0 20px;
        }
      }
    }
    .Echart {
      flex: 1;
      background: #031231;
      width: 100%;
      padding: 20px 0;
      box-sizing: border-box;
      border-radius: 12px;
      .EchartBg {
        background: url('../assets/image/echartsBg.png') no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 30px;
        font-size: 16px;
        font-weight: 500;
        color: #d9eeff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .circleBox {
          display: flex;
          align-items: center;

          .circle {
            width: 15px;
            height: 15px;
            border: 2px solid #00ffc4;
            border-radius: 50%;
            margin-right: 10px;
          }
          margin-right: 90px;
        }
      }
    }
  }
}
</style>